<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Vue 响应式模拟</title>
  </head>
  <body>
    <div id="app">
		<!-- <h1>差值表达式</h1>
		<h3>{{ msg }}</h3>
		<h3>{{ count }}</h3>
		<h1>v-text</h1>
		<div v-text="msg"></div>
		<div>测试v-html: <span v-html="htmlCon"></span></div>
		<h1>v-model</h1>
		<input type="text" v-model="msg" >
		<input type="text" v-model="count" > -->
		<!-- <button v-on:click="show">show</button> -->
		<button v-on:click="count += 1">show1</button>
		<!-- <button v-on:click="function(){count += 1}">show1</button> -->
		<h3>当前数字：{{ count }}</h3>
	</div>
	<script src="./js/dep.js"></script>
	<script src="./js/watcher.js"></script>
	<script src="./js/compiler.js"></script>
	<script src="./js/observer.js"></script>
	<script src="./js/vue.js"></script>
	<script>
		let vm = new Vue({
			el: '#app',
			data: {
				msg: 'Hello Vue',
				count: 100,
				person: {},
				htmlCon: `<span style="color:red">this html is red</span>`
			},
			methods: {
				show:function() {
					this.count += 1
					console.log(this.count)
					console.log('测试v-on')
				}
			}
		})
		//vm.$set(vm.person, 'name', 'jack')
	</script>
  </body>
</html>